<template>
    <div class="stand-alone">
        <div class="p-info clearfix">
            <div class="user-avatar fl">
                <img src="../assets/avator.jpg" alt="">
            </div>
            <div class="user-power fl">
                <div class="user-name">莫失莫忘</div>
                <ul class="power-wrap clearfix">
                    <li class="power-item"></li>
                    <li class="power-item"></li>
                    <li class="power-item"></li>
                </ul>
                <ul class="power-wrap clearfix power-list" >
                    <li class="power-item active" v-for="item in powerList"></li>
                </ul>
            </div>
            <div class="revive-card fr">
                X0
            </div>
            <p class="user-integral">{{currentAnswerIntegral}}</p>
        </div>
        <div class="question-type-content">
            <div class="ques-order">
                第{{orderNum}}题
            </div>
            <div class="question-name">
                {{currentQuestion}}
            </div>
            <div class="ques-list-wrap">
                <ul ref="ulList">
                    <transition-group name="list" tag="li">
                        <li ref="list" v-for="(item,index) in currentAnswerList " v-bind:key="item.id" class="ques-item" @click="chooseAnswer(item,index,$event)">{{item.answer}}</li>
                    </transition-group>
                </ul>
            </div>
        </div>
        <Fail v-if="isFailure" @gameOver="gameOver"/>
        <Success v-if="isGameOver" :integral="currentAnswerIntegral" @gameOver="gameOver" @gameContinue="gameContinue"/>
    </div>
</template>

<script>
    import {layerMsg,layerConfirm} from 'common/js/util'
    import Fail from 'components/fail'
    import Success from 'components/success'
    import {getArrayItems} from "common/js/util";
    export default {
        name: "StandAlone",
        components:{
            Fail,
            Success
        },
        data() {
            return {
                powerStatus:0,
                powerList:[0,1,2],
                currentAnswerIntegral:0,
                currentQuestionIndex:0,
                currentQuestion:'',
                currentAnswerList:[],
                questionList:[],
                btnFlag:false,
                orderNum:1,
                isGameOver:false,
                isFailure:false,
                totalQuestions:[],
                itemQuestionLength:10
            }
        },
        created(){
            this.getQuestions();
        },
        mounted() {

        },
        methods:{
            getQuestions(){
                this.powerStatus = this.powerList.length;
                this.currentQuestionIndex = 0;
                this.getAjax('./questions.json').then(res=>{
                    this.totalQuestions = res;
                    setTimeout(()=>{
                        this.questionList = getArrayItems(this.totalQuestions,this.itemQuestionLength);
                        this.currentQuestion = this.questionList[this.currentQuestionIndex].question;
                        this.currentAnswerList = this.questionList[this.currentQuestionIndex].answer;
                    },800);
                })
            },
            continueChallene(){
                this.btnFlag = false;
                this.currentQuestionIndex = 0;
                this.questionList = [];
                this.currentAnswerList = [];
                this.currentQuestion = '';
                this.orderNum = 1;
                this.powerList=[0,1,2];
                this.powerStatus = this.powerList.length;
                this.$nextTick(()=>{
                    setTimeout(()=>{
                        this.questionList = getArrayItems(this.totalQuestions,this.itemQuestionLength);
                        this.currentQuestion = this.questionList[this.currentQuestionIndex].question;
                        this.currentAnswerList = this.questionList[this.currentQuestionIndex].answer;
                    },1000);
                })

            },
            gameContinue(){  //继续挑战
                this.isGameOver = false;
                this.continueChallene();
            },
            gameOver(){  //结束挑战
                this.$router.push('/standStart');
            },
            formatCurrentData(index){
                setTimeout(()=>{
                    this.orderNum = index+1;
                    this.currentAnswerList = [];
                    this.$nextTick(()=>{
                            this.currentQuestion = this.questionList[index].question;
                            setTimeout(()=>{
                                this.btnFlag = false;
                                this.currentAnswerList = this.questionList[index].answer;
                            },1000)
                        }
                    )
                },1500)
            },
            answerCurrentQuestion(item,index){
                let target = this.$refs.list[index];
                target.classList.add('active');
                let clickIndex = index;
                let correctIndex = this.getCorrectIndex(this.currentAnswerList);
                setTimeout(()=>{
                    target.classList.remove('active');
                    if (item.is_correct){
                        target.classList.add('success');
                        this.$refs.list.forEach((item)=>{
                            item.classList.add('hidden');
                        });
                        this.$refs.list[clickIndex].classList.remove('hidden');
                        this.answerSuccess();
                    } else {
                        this.$refs.list.forEach((item)=>{
                            item.classList.add('hidden');
                        });
                        this.$refs.list[clickIndex].classList.remove('hidden');
                        this.$refs.list[correctIndex].classList.remove('hidden');
                        this.$refs.list[correctIndex].classList.add('success');
                        target.classList.add('error');
                        this.answerFail();
                    };
                },400)
            },
            nextQuestion(){
                this.currentQuestionIndex += 1;
                if (this.currentQuestionIndex>=this.questionList.length){
                    setTimeout(()=>{
                        this.isGameOver = true;
                    },500)
                    return;
                }
                this.formatCurrentData(this.currentQuestionIndex)
            },
            chooseAnswer(item,index){
                if (this.btnFlag)return;
                this.btnFlag = true;
                this.answerCurrentQuestion(item,index);
            },
            getCorrectIndex(data=[]){
                let vindex = '';
                data.forEach((item,index)=>{
                    if (item.is_correct){
                        vindex =index;
                    }
                });
                return vindex;
            },
            answerSuccess(){
                this.currentAnswerIntegral +=100;
                this.nextQuestion();
            },
            answerFail(){
                setTimeout(()=>{
                    layerMsg('消耗1个体力',()=>{
                        if (this.powerStatus == 0){
                           this.isFailure = true;
                        }else {
                            this.nextQuestion();
                        }
                        this.powerList.pop();
                        this.powerStatus -=1;
                    },1)
                },1000)

            }
        }
    }
</script>

<style scoped lang="less">
    .list-enter-active, .list-leave-active {
        transition: all 0.3s;
    }
    .list-enter, .list-leave-active {
        opacity: 0;
        transform: scale(0);
    }
    .stand-alone {
        width: 100vw;
        height: 100vh;
        background-color: #1371cb;
        padding: 0.2rem 0.3rem;

        .p-info {
            height: 1.4rem;
            padding: 0.2rem 0.25rem;
            background: url("../assets/user_bg.png") no-repeat center center;
            background-size: 110% 110%;
            box-shadow: 0 0 3px 3px rgba(14, 88, 173, 0.59);
            border-radius: 0.1rem;

            .user-avatar {
                width: 1rem;
                height: 1rem;
                border: 0.05rem solid #FFFFFF;
                border-radius: 50%;
                overflow: hidden;
            }
        }

        .user-integral {
            padding-top: 0.35rem;
            display: inline-block;
            font-family: -webkit-pictograph;;
            color: #FFFFFF;
            font-size: 0.66rem;
            margin-left: 0.2rem;
        }
    }

    .user-power {
        padding-left: 0.25rem;
        color: #FFFFFF;
        font-size: 0.25rem;

        .user-name{
            font-size: 0.3rem;
        }
    }

    .power-wrap {
        margin-top: 0.1rem;
        &.power-list{
            position: relative;
            top: -0.41rem;
        }
        .power-item {
            float: left;
            width: 0.36rem;
            height: 0.31rem;
            margin-right: 0.15rem;
            background:url("../assets/challenge/no_power.png") no-repeat center center;
            background-size: cover;
            &.active{
                background:url("../assets/challenge/power.png") no-repeat center center;
                background-size: cover;
            }
        }

    }

    .revive-card {
        width: 0.77rem;
        height: 0.92rem;
        background:url("../assets/challenge/resurgence_card.png") no-repeat center center;
        background-size: cover;
        color: #FFFFFF;
        font-size: 0.2rem;
        border-radius: 0.1rem;
        text-align: right;
        padding-top: 0.5rem;
    }

    .question-type-content {
        margin-top: 0.3rem;

        .ques-order {
            color: #FFFFFF;
            font-size: 0.26rem;
            text-align: center;
            display: block;
            margin-bottom: 0.2rem;
        }

        .question-name {
            margin-top: 1rem;
            color: #FFFFFF;
            font-size: 0.35rem;
        }

        .ques-list-wrap {
            margin-top: 1rem;

            .ques-item {
                &.hidden{
                    opacity: 0;
                    transform: scale3d(0.4,0.5,0.3);
                }
                height: 1rem;
                line-height: 1rem;
                text-align: center;
                background-color: #fff;
                color: #1c3485;
                font-size: 0.36rem;
                border-radius: 0.5rem;
                margin-bottom: 0.3rem;
                box-shadow: 0 3px 2px #365581;
                transition: all 0.3s;
                &.error{
                    color: #FFFFFF;
                    animation: scale 0.3s ease-in-out;
                    background: url("../assets/combat/btn_icon_wrong.png") no-repeat 0.3rem center #ff7062;
                    background-size: 0.5rem 0.5rem;
                }
                &.success{
                    background: url("../assets/combat/btn_icon_correct.png") no-repeat 0.3rem center #00e2bd;
                    background-size: 0.5rem 0.5rem;
                    padding: 0 0.3rem;
                    color: #FFFFFF;
                    animation: scale 0.3s ease-in-out;
                }
                &.active{
                    background-color: #2d59e0;
                    color: #FFFFFF;
                    animation: scale 0.3s ease-in-out;
                }
            }
        }

    }
    @keyframes scale {
        0%{
            transform: scale(1.05);
        }
        100%{
            transform: scale(1);
        }

    }
</style>
